<!--  -->
<template>
  <div>
    <h1>登陆状态：{{ LOGINSTR }}</h1>
    <div v-if="ISLOGIN">
      <h1>用户信息{{ userAbout.user }}</h1>
      <h2>用户名称{{ USERNAME }}</h2>
      <h2>用户所处学校{{ userUniversity }}</h2>
      <button @click="loginController('logout')">退出</button>
    </div>
    <div v-if="!ISLOGIN">
      <button @click="LOGIN_CONTROLLER(!ISLOGIN)">登陆</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    // 借助mapState生成计算属性，从state中读取数据 对象写法
    ...mapState("loginAbout", { ISLOGIN: "isLogin" }),
    // 借助mapState生成计算属性，从state中读取数据 数组写法
    ...mapState("userAbout", ["user"]),
    // 借助mapGetters生成计算属性，从getters中读取数据 对象写法
    ...mapGetters("loginAbout", { USERNAME: "userName", LOGINSTR: "loginStr" }),
    ...mapGetters("userAbout", { LOGINSTR: "loginStr" }),
    // 借助mapGetters生成计算属性，从getters中读取数据 数组写法
    ...mapGetters("userAbout", ["userUniversity"]),

    ...mapState(["loginAbout", "userAbout"]),
  },
  mounted() {},
  methods: {
    ...mapActions("loginAbout", ["loginController"]),
    ...mapMutations("loginAbout", { LOGIN_CONTROLLER: "LOGIN_CONTROLLER" }),
  },
};
</script>
<style lang="css" scoped></style>
